import { Socket } from "socket.io-client";
import Debug from 'debug'

export function useMouse(dom: HTMLDivElement, socket: Socket) {
    const d = Debug('tlf-mouse')
    /**
     * 防抖函数
     * @param fn 
     * @param time 
     */
    function debounce(fn: Function, time: number = 200) {
        let timer: any = null
        return function () {
            if (timer) clearTimeout(timer)
            timer = setTimeout(() => {
                // @ts-ignore
                fn.apply(this as any, arguments)
            }, time)
        }
    }
    //节流函数
    function throttle(fn: Function, time: number = 200) {
        let lastTime: number = 0
        return function () {
            const nowTime = new Date().getTime()
            if (nowTime - lastTime < time) return
            // @ts-ignore
            fn.apply(this, arguments)
            lastTime = nowTime
        }

    }

    function mouseHandler(event: MouseEvent | WheelEvent) {
        const bound = dom.getBoundingClientRect()
        d(event.type)
        const x = event.clientX - bound.left
        const y = event.clientY - bound.top
        const type = event.type
        let deltax = (event as WheelEvent).deltaX | 0
        let deltay = (event as WheelEvent).deltaY | 0
        const opt = { x, y, type, deltax, deltay, height: bound.height, width: bound.width }
        socket.emit('mouse', opt)
        d(opt)
    }
    function keyHandler(event: KeyboardEvent) {
        const bound = dom.getBoundingClientRect()
        d(event)
        d(bound)

        const type = event.type
        const opt = {
            type,
            shift: event.shiftKey,
            alt: event.altKey,
            ctrl: event.ctrlKey,
            meta: event.metaKey,
            key: event.key,
        }
        socket.emit('keyboard', opt)
        d(opt)
    }
    let mouseEvent: any
    let whellEvent: any
    function bindEvent() {
        mouseEvent = throttle(mouseHandler, 200)
        whellEvent = throttle(mouseHandler, 200)
        dom.addEventListener("mousemove", mouseEvent)
        dom.addEventListener("click", mouseHandler)
        dom.addEventListener("dblclick", mouseHandler)
        dom.addEventListener("contextmenu", mouseHandler)
        dom.addEventListener("wheel", whellEvent)
        window.addEventListener("keydown", keyHandler)
        window.addEventListener("keyup", keyHandler)
        window.addEventListener("keypress", keyHandler)
    }
    function unbindEvent() {
        dom.removeEventListener("mousemove", mouseEvent)
        dom.removeEventListener("click", mouseHandler)
        dom.removeEventListener("dblclick", mouseHandler)
        dom.removeEventListener("contextmenu", mouseHandler)
        dom.removeEventListener("wheel", whellEvent)
        window.removeEventListener("keydown", keyHandler)
        window.removeEventListener("keyup", keyHandler)
        window.removeEventListener("keypress", keyHandler)
    }
    bindEvent()
    return {
        unbindEvent,
        bindEvent
    }
}